<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        后期渲染是threejs把3d模型渲染完事后，它拿到图片后再加工
        1. 创建后期处理器composer
        2. composer.addPass(各种通道Pass)
    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        // 引入渲染器通道RenderPass
        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
        // 引入OutlinePass通道
        import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
        // 引入UnrealBloomPass通道
        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';


        // 1. 必须创建的三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        const cube1 = new THREE.Mesh(geometry, material);
        cube1.position.set(0, 0, 2)
        scene.add(cube1);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 2. 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 3. 发光

        // 3.1 结合renderer: 创建后处理对象EffectComposer，WebGL渲染器作为参数
        const composer = new EffectComposer(renderer);

        // 添加通道
        // 3.2 场景通道：结合scene&camera: 创建一个渲染器通道，场景和相机作为参数
        const renderPass = new RenderPass(scene, camera);
        // 设置renderPass通道
        composer.addPass(renderPass);

        // 3.3 发光通道：OutlinePass第一个参数v2的尺寸和canvas画布保持一致
        const v2 = new THREE.Vector2(window.innerWidth, window.innerWidth);
        // canvas画布宽高度尺寸是800, 600
        const bloomPass = new UnrealBloomPass(v2);
        composer.addPass(bloomPass)
        console.log(bloomPass.strength);
        {
            //bloom发光强度
            bloomPass.strength = 0.5;
        }


        function render() {
            // renderer.render(scene, camera);
            composer.render();
            requestAnimationFrame(render)
        }
        render();
    </script>
</body>

</html>